Chart.js একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য লাইব্রেরি, যা ডেটা ভিজ্যুয়ালাইজেশনকে আরও কার্যকর এবং আকর্ষণীয় করে তোলে। Dataset ফিল্টার এবং পজিশনিং কাস্টমাইজেশন হল Chart.js এর সেইসব বৈশিষ্ট্য যা ডেটার প্রদর্শন এবং লেআউট কাস্টমাইজ করতে সাহায্য করে। এই গাইডে, আমরা দেখব কিভাবে একটি dataset ফিল্টার তৈরি করা যায় এবং কিভাবে চার্টের পজিশনিং কাস্টমাইজ করা যায়।
১. Dataset ফিল্টার
Dataset ফিল্টার ব্যবহার করে আপনি শুধুমাত্র কিছু নির্দিষ্ট ডেটা পয়েন্ট বা ডেটাসেট প্রদর্শন করতে পারেন। এটা খুবই উপকারী যখন আপনি একাধিক ডেটাসেট থেকে কেবল কিছু নির্দিষ্ট ডেটা প্রদর্শন করতে চান।
উদাহরণ: Dataset ফিল্টার করা
ধরা যাক, আপনার একটি চার্ট রয়েছে যেটিতে একাধিক ডেটাসেট আছে এবং আপনি কোন একটি নির্দিষ্ট ডেটাসেট বা কিছু পয়েন্ট প্রদর্শন করতে চান।
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dataset Filter</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Chart.js Dataset Filter Example</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
// Chart.js Data Setup
const myChart = new Chart(ctx, {
type: 'line', // Line chart type
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Dataset 2',
data: [10, 18, 5, 9, 6, 7],
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top', // Positioning the legend at the top
}
},
// Dataset filter logic: Filtering to show only Dataset 1
onClick: function(e) {
const activePoints = myChart.getElementsAtEventForMode(e, 'nearest', {intersect: true}, false);
if (activePoints.length > 0) {
const datasetIndex = activePoints[0].datasetIndex;
if (datasetIndex === 1) {
// Only display Dataset 1 if Dataset 2 is clicked
myChart.data.datasets = [myChart.data.datasets[0]];
} else {
// Restore both datasets if Dataset 1 is clicked
myChart.data.datasets = [{
label: 'Dataset 1',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}, {
label: 'Dataset 2',
data: [10, 18, 5, 9, 6, 7],
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
}];
}
myChart.update();
}
}
}
});
বর্ণনা:
onClick: এখানে আমরা একটিonClickইভেন্ট ব্যবহার করেছি, যাতে ক্লিক করা হলে একটি ডেটাসেট ফিল্টার হয়। উদাহরণস্বরূপ, যদি ব্যবহারকারী 'Dataset 2' ক্লিক করেন, তবে চার্ট শুধুমাত্র 'Dataset 1' প্রদর্শন করবে।getElementsAtEventForMode: এটি Chart.js এর একটি ফাংশন, যা ব্যবহারকারীর ক্লিকের সময় কোন ডেটাসেট বা পয়েন্ট নির্বাচন হয়েছে তা শনাক্ত করে।
২. পজিশনিং কাস্টমাইজেশন
Chart.js এ আপনি অনেক উপায়ে পজিশনিং কাস্টমাইজ করতে পারেন। এর মধ্যে রয়েছে লেজেন্ড, টুলটিপ, স্কেল এবং আরও অনেক কিছু। Chart.js এর options অংশে আপনি এই সব কাস্টমাইজেশন করতে পারেন।
উদাহরণ: পজিশনিং কাস্টমাইজেশন
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Positioning Customization</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h1>Chart.js Positioning Customization</h1>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar', // Bar chart type
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple'],
datasets: [{
label: 'Votes',
data: [12, 19, 3, 5, 2],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right', // Position the legend to the right
labels: {
color: 'black', // Change label color to black
font: {
size: 14
}
}
},
tooltip: {
enabled: true, // Enable tooltips
position: 'nearest', // Position tooltips nearest to the point
callbacks: {
label: function(tooltipItem) {
return 'Votes: ' + tooltipItem.raw;
}
}
}
},
scales: {
y: {
beginAtZero: true,
position: 'left', // Position Y-axis to the left
},
x: {
position: 'bottom' // Position X-axis to the bottom
}
}
}
});
বর্ণনা:
- Legend Position: লেজেন্ডকে
rightএ পজিশন করা হয়েছে, যা চার্টের ডান দিকে অবস্থান করবে। - Tooltip Position: টুলটিপের অবস্থান
nearestকরা হয়েছে, অর্থাৎ টুলটিপটি পয়েন্টের কাছাকাছি প্রদর্শিত হবে। - Axis Position: এক্স-অক্ষ (X-axis) এবং ওয়াই-অক্ষ (Y-axis) পজিশন কাস্টমাইজ করা হয়েছে। এক্স-অক্ষটি নিচে এবং ওয়াই-অক্ষটি বামে অবস্থান করবে।
সারাংশ
Chart.js এ Dataset ফিল্টার এবং পজিশনিং কাস্টমাইজেশন আপনার ডেটা ভিজ্যুয়ালাইজেশনকে আরও উপযোগী এবং দৃশ্যমান করে তোলে।
- Dataset ফিল্টার দিয়ে আপনি ডেটাসেটের ভিউ কাস্টমাইজ করতে পারেন, যেমন কিছু নির্দিষ্ট ডেটাসেট বা ডেটা পয়েন্ট প্রদর্শন করা।
- পজিশনিং কাস্টমাইজেশন দিয়ে আপনি চার্টের বিভিন্ন উপাদান যেমন লেজেন্ড, টুলটিপ, স্কেল ইত্যাদির অবস্থান এবং স্টাইল কাস্টমাইজ করতে পারেন।
এগুলি ব্যবহারে আপনি আপনার চার্টের কার্যকারিতা এবং ব্যবহারকারীর অভিজ্ঞতা বাড়াতে পারবেন।
Read more
